@charset "utf-8";
.steps{ position: relative; display: inline-block;
  .steps-item{ float: left; text-align: center; width: 150px; position: relative; z-index: 2; color: #999;
    .steps-icon{ display: block; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; border: 1px solid #ddd; font-style: normal; font-size: 30px; background: #fff; font-weight: 700; margin: 0 auto 10px; }
    .steps-title{ font-size: 16px; display: block; }
    .steps-intro{ font-size: 12px; color: #999 }
    &.active{ color: #f00;
      .steps-icon{ border-color: #f00 }
      .steps-title{ }
      &:before{ content: ''; display: block; border-bottom: 2px solid #f00; position: absolute; left: 0; top: 25px; width: 100%; z-index: -1 }
    }
  }
  &:before{ content: ''; display: block; border-bottom: 2px solid #ddd; position: absolute; left: 0; top: 25px; width: 100%; }
  /*第2种演示效果*/
  &.steps-2{
    .steps-item{
      .steps-icon{ border: 0;
        span{ display: none }
      }
    }
  }
}